<template>
  <div>
    <p>当前水温: {{ temp }}°C</p>
    <p>当前水位: {{ height }}cm</p>
    <button @click="increaseTemp">增加温度</button>
    <button @click="increaseHeight">增加水位</button>
  </div>
</template>

<script lang="ts" setup>
import {ref, watchEffect, watch} from 'vue';

// 定义响应式数据
const temp = ref(50); // 初始水温为 50°C
const height = ref(70); // 初始水位为 70cm

// 使用 watchEffect 监视数据变化
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log('watchEffect: 条件满足，给服务器发请求');
    // 这里可以添加发送请求的逻辑
  }
});

// 使用 watch 监视数据变化
watch([temp, height], ([newTemp, newHeight]) => {
  if (newTemp >= 60 || newHeight >= 80) {
    console.log('watch: 条件满足，给服务器发请求');
    // 这里可以添加发送请求的逻辑
  }
});

// 增加温度的函数
const increaseTemp = () => {
  temp.value += 10;
};

// 增加水位的函数
const increaseHeight = () => {
  height.value += 10;
};
</script>